<template>
  <div class="shape-position" :style="style">
    <div class="shape-info px-4">
      {{ Math.ceil(currentShape.w) }}x{{ Math.ceil(currentShape.h) }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { currentShape } from '../../data/shapes';

const style = computed(() => {
  return {
    left: `${currentShape.value.x + currentShape.value.w / 2}px`,
    top: `${currentShape.value.y + currentShape.value.h}px`,
  };
});
</script>

<style lang="scss" scoped>
.shape-position {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 10;
  top: 0;
  .shape-info {
    top: 100%;
    text-align: center;
    color: white;
    width: fit-content;
    transform: translateX(-50%) translateY(5px);
    zoom: 0.5;
    background-color: var(--primary);
    border-radius: 2px;
  }
}
</style>
